<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>pity？</title>
		<style>
	div{width:150px;
	height:150px;
	background: white;
	position:relative;
	animation:myfirst 20s;
	-webkit-animation:myfirst 20s; /* Safari and Chrome */}
	@keyframes myfirst
{
	0%   {background:ghostwhite; right:0px; top:0px;}
	25%  {background:lightgoldenrodyellow; right:200px; top:0px;}
	50%  {background:lightyellow; right:200px; top:200px;}
	75%  {background:whitesmoke; transform: rotateY(180deg);}
	100% {background:white; right:0px; top:0px;}
}
 {
		  width: 150px;
          height: 150px;
	     -webkit-transition: width 16s, height 16s, -webkit-transform 26s; /* For Safari 3.1 to 6.0 */
        }
       
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:white; left:0px; top:0px;}
	25%  {background:antiquewhite; left:200px; top:0px;}
	50%  {background:floralwhite; left:200px; top:200px;}
	75%  {background:lightcyan; left:0px; top:200px;}
	100% {background:white; left:0px; top:0px;}
}

 div:hover
        {
	     width: 300px;
         height: 400px; 
	     -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        }

		</style>
	</head>
	<body>
		<center>
	 <h1>A paper plane</h1>
	 <p>青春被折成一架纸飞机，一路走一路丢，在长大后才懂得珍惜，但它的色彩早已不在.....</p>
	 <div>
		<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="far" data-icon="paper-plane" class="svg-inline--fa fa-paper-plane fa-w-16" role="img" viewBox="0 0 512 512"><path fill="currentColor" d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"/>
		<path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"/>
	    </svg>
	 </div>
	 </center>
	</body>
</html>
